<template>
  <div>
    <div class="header">
      <Nav :title="title"></Nav>
      <img class="img" :src="id == 1 ? imgs.hot : imgs.new" alt="" />
    </div>

    <div class="tab">
      <div class="order-l" :class="add == 'one' ? 'active' : ''" @click="addAct">
        综合
      </div>
      <div class="order-m" @click="order">
        <span class="order-txt" :class="flag == 'up' ? 'active' : ''">价格</span>
        <div class="box">
          <van-icon :color="flag == 'up' ? '#deb12a' : ''" name="arrow-up" />
          <van-icon :color="flag == 'down' ? '#deb12a' : ''" name="arrow-down" />
        </div>
      </div>
      <div class="order-r" @click="addAct1" :class="add == 'three' ? 'active' : ''">
        分类
      </div>
    </div>

    <div>
      <ul class="goodList">
        <li class="goodList-item" v-for="item in list" :key="item.id" @click="toDetail(item.id)">
          <img class="img" :src="item.list_pic_url" alt="" />
          <div class="goods-txt">
            <span class="txt-t">{{ item.name }}</span>
            <span class="txt-b">
              {{ item.retail_price }}
            </span>
          </div>
        </li>
        <li></li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { hotNew } from '@/api/home/home'
export default {
  name: 'ListApi',
  setup () {
    const route = useRoute()
    const router = useRouter()
    console.log('123', route.query.id === '1')
    const title = '专题'
    const list = ref([])
    const flag = ref('def')
    const add = ref('one')
    const txt = ref('')
    const id = ref('')
    id.value = route.query.id
    const imgs = ref({
      new: 'http://jinglins.gitee.io/bufan-tesco-mall/assets/new-list-banner-b691c95d.png',
      hot: 'http://jinglins.gitee.io/bufan-tesco-mall/assets/hot-list-banner-ccf22d3f.png'
    })
    function init () {
      if (route.query.id === 1) {
        txt.value = '新品首发'
      } else {
        txt.value = '人气推荐'
      }
      hotNew({
        isNew: route.query.id === '1' ? 1 : '',
        isHot: route.query.id === '2' ? 1 : '',
        order: ''
      }).then((res) => {
        console.log(res)
        list.value = res.data
      })
    }
    init()

    const order = () => {
      add.value = ''
      if (flag.value === 'def') {
        flag.value = 'up'
      } else if (flag.value === 'up') {
        flag.value = 'down'
      } else {
        flag.value = 'up'
      }
      console.log(flag.value)
      hotNew({
        isNew: route.query.id === '1' ? 1 : '',
        isHot: route.query.id === '2' ? 1 : '',
        order: flag.value === 'up' ? 'asc' : 'desc'
      }).then((res) => {
        console.log(res)
        list.value = res.data
      })
    }
    const addAct = () => {
      flag.value = ''
      add.value = 'one'
      init()
    }
    const addAct1 = () => {
      flag.value = ''
      add.value = 'three'
      init()
    }
    const toDetail = (id) => {
      router.push({ path: '/home/goodsDetail', query: { id: id } })
    }

    return { id, list, flag, add, txt, imgs, order, addAct, addAct1, toDetail, title }
  }
}
</script>

<style lang="scss" scoped>
@import './scss/index.scss'
</style>
